<template>
  <form id="data-form-container" ref="container" @submit.prevent="handleSubmit" class="data-form-container">
    <div class="form-item">
      <div class="input-area">
        <input
          type="text"
          maxlength="10"
          v-model="formdata.nickname"
          placeholder="用户昵称"
        />
        <span class="tip">{{ formdata.nickname.length }}/10</span>
      </div>
      <div class="error">{{ error.nickname }}</div>
    </div>
    <div class="form-item">
      <div class="text-area">
        <textarea
          name=""
          id=""
          cols="30"
          rows="10"
          placeholder="留下你的见解"
          maxlength="300"
          v-model="formdata.content"
        ></textarea>
        <span class="tip">{{ formdata.content.length }}/300</span>
      </div>
      <div class="error">{{ error.content }}</div>
    </div>
    <div class="form-item">
      <div class="button-area">
        <button :disabled="isSubmiting">
          {{ isSubmiting ? "提交中..." : "提交" }}
        </button>
      </div>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formdata: {
        nickname: "",
        content: "",
      },
      error: {
        nickname: "",
        content: "",
      },
      isSubmiting: false,
    };
  },
  methods: {
    handleSubmit() {
      this.error.nickname = this.formdata.nickname ? "" : "请填写昵称";
      this.error.content = this.formdata.content ? "" : "请输入内容";
      if (this.error.nickname || this.error.content) {
        //有错误
        return;
      }
      this.isSubmiting = true;
      this.$emit("submit", this.formdata, (successMsg) => {
        this.$showMessage({
          content: successMsg,
          type: "success",
          duration: 1000,
          container: this.$refs.container,
          callback:()=> {
            this.isSubmiting = false;
            this.formdata.nickname = "";
            this.formdata.content = "";
          },
        });
      });
    },
  },
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.data-form-container {
  margin-bottom: 20px;
  overflow: hidden;
  .form-item {
    margin-bottom: 8px;
  }
  .input-area {
    width: 50%;
    position: relative;
  }
  .text-area {
    position: relative;
  }
  .tip {
    position: absolute;
    right: 5px;
    bottom: 5px;
    color: #b4b8bc;
    font-size: 12px;
  }
  input,
  textarea {
    display: block;
    width: 100%;
    border: 1px dashed @gray;
    box-sizing: border-box;
    border-radius: 5px;
    color: @words;
    outline: none;
    &:focus {
      border-color: @primary;
    }
  }
  input {
    padding: 0 15px;
    height: 40px;
  }
  textarea {
    resize: none;
    padding: 8px 15px;
    height: 120px;
  }
  .error {
    color: @warn;
    font-size: 14px;
    margin-top: 6px;
    height: 20px;
    line-height: 20px;
  }
  button {
    position: relative;
    width: 100px;
    height: 34px;
    outline: none;
    border: none;
    border-radius: 4px;
    color: #fff;
    background-color: @primary;
    cursor: pointer;
    &:hover {
      background-color: darken(@primary, 10%);
      &:disabled {
        background-color: lighten(@primary, 20%);
        cursor: not-allowed;
      }
    }
  }
}
</style>